<!--智慧消防V1.0-admin页面-->
<template>
  <div class="home_qy">
    <div class="qy_top">
      <div class="left_select">
        <div class="select_value">
          <p>{{ userInfo.enterpriseName+'管理员' }}</p>
<!--          <i class="el-icon-caret-right"></i>-->
        </div>
      </div>
      <div class="center_title">
        <p class="bg"></p>
        <p>哈密市消防多维动态处置管理平台</p>
      </div>
      <div class="right_menus">
        <el-tooltip class="item" effect="dark" content="消息通知" placement="top-start">
          <div class="menu_icon" @click="goLink('/common/selfNotice')">
            <i class="el-icon-if-huoqingxinxi"></i>
            <div class="circular" v-if="noticeVal">{{ noticeVal }}</div>
          </div>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="待办事项" placement="top-start">
          <div class="menu_icon" @click="goLink('/taskManage/agencyList')">
            <i class="el-icon-if-meirirenwu1"></i>
            <div class="circular" v-if="agencyNum">{{ agencyNum }}</div>
          </div>
        </el-tooltip>
      </div>
    </div>
    <div class="qy_content">
      <div class="left">
        <div class="m">
          <h5 class="title">
            <p>维保工单数据</p>
          </h5>
          <div class="info">
            <div class="table_header">
              <p>工单名称</p>
              <p>所属企业</p>
              <p>提交时间</p>
              <p>状态</p>
            </div>
            <div class="swiper-container" id="wbgdsj">
              <div class="swiper-wrapper">
                <div
                  class="table_item swiper-slide"
                  v-for="(item, i) in workOrderList"
                  @click="goLink('/workOrder/maintenanceInfo?ucId=' + item.ucId)"
                  :key="i"
                >
                  <p :title="item.name">{{ item.name }}</p>
                  <p :title="item.enterpriseName">{{ item.enterpriseName }}</p>
                  <p :title="item.addTimeStr">{{ item.addTimeStr }}</p>
                  <p :title="item.statusStr" class="co_og">{{ item.statusStr }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="m">
          <h5 class="title">
            <p>考核单数据</p>
          </h5>
          <div class="info">
            <div class="table_header">
              <p>考核名称</p>
              <p>所属企业</p>
              <p>考核时间</p>
            </div>
            <div class="swiper-container" id="khdsj">
              <div class="swiper-wrapper">
                <div
                  class="table_item swiper-slide"
                  v-for="(item, i) in checkRecordsList"
                  @click="goLink('/maintenance/checkRecordsList')"
                  :key="i"
                >
                  <p :title="item.enterName">{{ item.enterName }}</p>
                  <p :title="item.enterpriseName">{{ item.enterpriseName }}</p>
                  <p :title="item.addTimeStr">{{ item.addTimeStr }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="c_top_list">
          <div class="ct_item" @click="goLink('/equipment/equipment')">
            <p>设备总数（个）</p>
            <p class="num co_gr">{{ deviceData.deviceTotal || 0 }}</p>
          </div>
          <div class="ct_item" @click="goLinkParam('Equipment',{realStatus:'02'})">
            <p>异常设备（个）</p>
            <p class="num co_yl">{{ deviceData.abnormalTotal || 0 }}</p>
          </div>
          <div class="ct_item" @click="goLink('/equipment/measuringEqu')">
            <p>检测设备（个）</p>
            <p class="num co_og">{{ deviceData.measuringTotal || 0 }}</p>
          </div>
          <div class="ct_item" @click="goLinkParam('FireInfo',{fireDrill:0})">
            <p>真实火警（起）</p>
            <p class="num co_red">{{ fireInfo.fireNum || 0 }}</p>
          </div>
          <div class="ct_item" @click="goLinkParam('FireInfo',{status:2,fireDrill:0})">
            <p>已处理（起）</p>
            <p class="num co_light">{{ fireInfo.finish || 0 }}</p>
          </div>
          <div class="ct_item" @click="goLinkParam('FireInfo',{status:0,fireDrill:0})">
            <p>未处理（起）</p>
            <p class="num co_og">{{ fireInfo.unFinish || 0 }}</p>
          </div>
          <div class="ct_item" @click="goLink('/sys/user')">
            <p>用户总数</p>
            <p class="num co_red">{{ userCount.total || 0 }}</p>
          </div>
          <div class="ct_item" @click="goLinkParam('User',{online:1})">
            <p>用户在线数</p>
            <p class="num co_gr">{{ userCount.online || 0 }}</p>
          </div>
        </div>
        <div class="c_img_bg" :style="{backgroundImage:'url('+require('../../assets/hm_home/center_bg.png')+')', backgroundRepeat: 'no-repeat', backgroundSize: 'cover',backgroundSize: '100% 100%'}">
          <div class="content-left" id="leftChart"></div><div class="content-right" id="rightChart"></div>
          <div class="content-bottom-left" id="bottomleftChart"></div><div class="content-bottom-right" id="bottomrightChart"></div>
        </div>
      </div>
      <div class="right">
        <div class="m">
          <h5 class="title">
            <p>任务领取情况</p>
          </h5>
          <div class="info">
            <div class="table_header">
              <p>企业名称</p>
              <p>电话</p>
              <p>任务领取</p>
            </div>
            <div class="swiper-container" id="rwlqqk">
              <div class="swiper-wrapper">
                <div
                  class="table_item swiper-slide"
                  v-for="(item, i) in taskOverStatus"
                  @click="goLink('/taskManage/task')"
                  :key="i"
                >
                  <p :title="item.name">{{ item.name }}</p>
                  <p :title="item.mobile">{{ item.mobile }}</p>
                  <p :title="item.taskCompletion">{{ item.taskCompletion }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="m">
          <h5 class="title">
            <p>维保任务情况</p>
          </h5>
          <div class="info">
            <div class="table_header">
              <p>名称</p>
              <p>所属企业</p>
              <p>维保企业</p>
              <p>状态</p>
            </div>
            <div class="swiper-container" id="wbrwqk">
              <div class="swiper-wrapper">
                <div
                  class="table_item swiper-slide"
                  v-for="(item, i) in maintenanceInfoList"
                  @click="goLink('/maintenance/maintenanceTaskInfo?ucId=' + item.ucId)"
                  :key="i"
                >
                  <p :title="item.title">{{ item.title }}</p>
                  <p :title="item.enterpriseName">{{ item.enterpriseName }}</p>
                  <p :title="item.maintenaceEnterpriseName">{{ item.maintenaceEnterpriseName }}</p>
                  <p :title="item.statusStr">{{ item.statusStr }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="m">
          <h5 class="title">
            <p>隐患工单数据</p>
          </h5>
          <div class="info">
            <div class="table_header">
              <p>隐患名称</p>
              <p>时间</p>
              <p>责任单位</p>
              <p>状态</p>
            </div>
            <div class="swiper-container" id="yhgdsj">
              <div class="swiper-wrapper">
                <div
                  class="table_item swiper-slide"
                  v-for="(item, i) in nonEmergency"
                  @click="goLink('/nonEmergency/hiddenDangerInfo?ucId=' + item.ucId)"
                  :key="i"
                >
                  <p :title="item.name">{{ item.name }}</p>
                  <p :title="item.addTime">{{ item.addTime }}</p>
                  <p :title="item.enterpriseName">{{ item.enterpriseName }}</p>
                  <p :title="item.statusStr" class="co_og">{{ item.statusStr }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getEnterpriseTaskStatus,
  getFireData,
  getMaintenanceInfoList,
  getOverTimeOrderList,
  getDeviceData,
  getInCheckRecordsList,
  getUserNoReadNotice,
  getUserAgencyNum, getInHiddenDanger, getOnlineCount,
} from "@/api/common";
import {queryMeasrData} from "@/api/equipment";

export default {
  name: "DashboardAdmin",
  data() {
    return {
      select: false,
      mySwiper: { // swiper 实例
        wbgdsj: {},
        khdsj: {},
        wbrwqk: {},
        yhgdsj: {},
        rwlqqk: {}
      },
      noticeVal: '', // 通知数量
      agencyNum: '', // 待办数量
      nonEmergency: [], // 隐患工单数据
      maintenanceInfoList: [], // 维保任务情况
      workOrderList: [], // 维保工单数据
      checkRecordsList: [], // 考核单数据
      taskOverStatus: [], // 任务领取情况
      fireInfo: {}, // 右侧数据统计
      deviceData: {}, // 左侧数据统计
      leftValue: 0,
      rightValue: 0,
      bottomRightValue: 0,
      bottomLeftValue: 0,
      userCount:{},
      bottomleftChart: {},
      bottomRightChart: {},
      rightChart: {},
      leftChart: {},
      timer: {}
    };
  },
  computed: {
    // 用户信息
    userInfo() {
      return this.$store.getters.userInfo;
    },
  },
  created() {
    this.initView();
    this.initEcharts();
    this.timer = setInterval(() => {
      this.queryMeasrData();//你所加载数据的方法
    }, 2000)
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    queryMeasrData(){
      queryMeasrData({}).then((res) => {
        if(res.data) {
          if(res.data.plb){
            this.leftValue = res.data.plb.value1.replace('Mpa', '').replace('MPa', '').replace('MPA', '');
            this.leftChart.setOption({
              series: [
                {
                  data: [
                    {
                      value: this.leftValue
                    }
                  ]
                }
              ]
            });
          }
          if(res.data.xhs){
            this.rightValue = res.data.xhs.value1.replace('Mpa', '').replace('MPa', '').replace('MPA', '');
            this.rightChart.setOption({
              series: [
                {
                  data: [
                    {
                      value: this.rightValue
                    }
                  ]
                }
              ]
            });
          }
          if(res.data.sxt){
            this.bottomLeftValue = res.data.sxt.value1.replace('m', '').replace('M', '');
            this.bottomleftChart.setOption({
              series: [
                {
                  data: [
                    {
                      value: this.bottomLeftValue
                    }
                  ]
                }
              ]
            });
          }
          if(res.data.fscj){
            this.bottomRightValue = res.data.fscj.value1.replace('m', '').replace('M', '');
            this.bottomRightChart.setOption({
              series: [
                {
                  data: [
                    {
                      value: this.bottomRightValue
                    }
                  ]
                }
              ]
            });
          }

        }
      });
    },
    async initEcharts() {
      queryMeasrData({}).then((res) => {
        if(res.data) {
          if(res.data.plb){
            this.leftValue = res.data.plb.value1.replace('Mpa', '').replace('MPa', '').replace('MPA', '');
            this.leftChart = this.$echarts.init(document.getElementById('leftChart'))
            this.initLeftEchart()
          }
          if(res.data.xhs){
            this.rightValue = res.data.xhs.value1.replace('Mpa', '').replace('MPa', '').replace('MPA', '');
            this.rightChart = this.$echarts.init(document.getElementById('rightChart'))
            this.initRightEchart()
          }
          if(res.data.sxt){
            this.bottomLeftValue = res.data.sxt.value1.replace('m', '').replace('M', '');
            this.bottomleftChart = this.$echarts.init(document.getElementById('bottomleftChart'))
            this.initBottomleftChart()

          }
          if(res.data.fscj){
            this.bottomRightValue = res.data.fscj.value1.replace('m', '').replace('M', '');
            this.bottomRightChart = this.$echarts.init(document.getElementById('bottomrightChart'))
            this.initBottomrightChart()
          }

        }
      });
    },
    initLeftEchart() {
      this.$nextTick(() => {
        // 绘制图表
        this.leftChart.setOption(   {
          title: {
            text: "喷淋系统压力",
            textAlign: 'center',
            left: '38%',
            bottom: '10%',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              type: 'gauge',
              center: ['40%', '50%'],
              max: 1.5,
              min: 0,
              splitNumber: 3,
              axisLine: {
                lineStyle: {
                  width: 20,
                  color: [
                    [0.1, '#fd666d'],
                    [0.7, '#25d00f'],
                    [1, '#25d00f']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              splitLine: {
                distance: -105,
                length: 0,
                lineStyle: {
                  color: '#fff',
                  width: 4
                }
              },
              axisLabel: {
                color: 'auto',
                distance: 30,
                fontSize: 14
              },
              detail: {
                valueAnimation: true,
                formatter: '{value} Mpa',
                color: 'auto',
                fontSize: 14,
                verticalAlign: 'middle',
              },
              data: [
                {
                  value: this.leftValue
                }
              ]
            }
          ]
        })
      })
    },

    initBottomrightChart() {
      this.$nextTick(() => {
        // 绘制图表
        this.bottomRightChart.setOption(   {
          title: {
            text: "高位水箱液位",
            left: '43%',
            bottom: '10%',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              type: 'gauge',
              center: ['60%', '50%'],
              max: 2,
              min: 0,
              splitNumber: 4,
              axisLine: {
                lineStyle: {
                  width: 20,
                  color: [
                    [0.2, '#fd666d'],
                    [0.7, '#25d00f'],
                    [1, '#25d00f']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              splitLine: {
                distance: -105,
                length: 0,
                lineStyle: {
                  color: '#fff',
                  width: 4
                }
              },
              axisLabel: {
                color: 'auto',
                distance: 30,
                fontSize: 14
              },
              detail: {
                valueAnimation: true,
                formatter: '{value} m',
                color: 'auto',
                fontSize: 14,
                verticalAlign: 'middle',
              },
              data: [
                {
                  value: this.bottomRightValue
                }
              ]
            }
          ]
        })
      })
    },
    initRightEchart() {
      this.$nextTick(() => {
        // 绘制图表
        this.rightChart.setOption(   {
          title: {
            text: "消火栓系统压力",
            left: '40%',
            bottom: '10%',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              type: 'gauge',
              center: ['60%', '50%'],
              max: 1.5,
              min: 0,
              splitNumber: 3,
              axisLine: {
                lineStyle: {
                  width: 20,
                  color: [
                    [0.1, '#fd666d'],
                    [0.7, '#25d00f'],
                    [1, '#25d00f']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              splitLine: {
                distance: -105,
                length: 0,
                lineStyle: {
                  color: '#fff',
                  width: 4
                }
              },
              axisLabel: {
                color: 'auto',
                distance: 30,
                fontSize: 14
              },
              detail: {
                valueAnimation: true,
                formatter: '{value} Mpa',
                color: 'auto',
                fontSize: 14,
                verticalAlign: 'bottom',
              },
              data: [
                {
                  value: this.rightValue
                }
              ]
            }
          ]
        })
      })
    },
    initBottomleftChart() {
      this.$nextTick(() => {

        // 绘制图表
        this.bottomleftChart.setOption(   {
          title: {
            text: "消防水池液位",
            left: '21%',
            bottom: '10%',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              type: 'gauge',
              center: ['40%', '50%'],
              max: 2,
              min: 0,
              splitNumber: 4,
              axisLine: {
                lineStyle: {
                  width: 20,
                  color: [
                    [0.2, '#fd666d'],
                    [0.7, '#25d00f'],
                    [1, '#25d00f']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              splitLine: {
                distance: -105,
                length: 0,
                lineStyle: {
                  color: '#fff',
                  width: 4
                }
              },
              axisLabel: {
                color: 'auto',
                distance: 30,
                fontSize: 14
              },
              detail: {
                valueAnimation: true,
                formatter: '{value} m',
                color: 'auto',
                fontSize: 14,
                verticalAlign: 'middle',
              },
              data: [
                {
                  value: this.bottomLeftValue
                }
              ]
            }
          ]
        })
      })
    },
    // 加载数据
    initView() {
      // 用户在线统计
      getOnlineCount({}).then((res)=> {
        this.userCount = res.data
      });
      // 左侧数据统计
      getDeviceData({}).then(res => {
        this.deviceData = Object.assign(
            {},
            this.$options.data().deviceData,
            this.deviceData,
            res.data
        );
      })
      // 维保工单数据
      getOverTimeOrderList({}).then((res) => {
        this.workOrderList = res.data;
        this.scroll("wbgdsj", 8);
      });
      // 考核单数据
      getInCheckRecordsList({type:0}).then(res => {
        res.data.forEach(item => {
          item.enterName = item.enterpriseName + "考核单"
        })
        this.checkRecordsList = res.data
        this.scroll('khdsj', 8)
      })
      // 维保任务情况
      getMaintenanceInfoList({}).then((res) => {
        this.maintenanceInfoList = res.data;
        this.scroll("wbrwqk", 4);
      });
      // 隐患工单数据
      getInHiddenDanger({ pageSize: 100 }).then((res) => {
        this.nonEmergency = res.data;
        this.scroll("yhgdsj", 4);
      });
      // 任务领取情况
      getEnterpriseTaskStatus({ deleted: false }).then((res) => {
        this.taskOverStatus = res.data;
        this.scroll("rwlqqk", 4);
      });
      // 左侧数据统计
      getFireData({}).then((res) => {
        this.fireInfo = Object.assign({}, this.$options.data().fireInfo, res.data);
      });
      // 通知数量
      getUserNoReadNotice({}).then(res => {
        this.noticeVal = res.data
      })
      // 待办数量
      getUserAgencyNum({}).then(res => {
        this.agencyNum = res.data
      })
    },
    // 跳转链接
    goLink(path) {
      this.$router.push(path)
    },
    goLinkParam(name,param){
      this.$router.push({name:name,params:param})
    },
    // swiper滚动效果
    scroll(name, i, between = 5) {
      this.$nextTick(() => {
        this.mySwiper[name].destroy && this.mySwiper[name].destroy();
        this.mySwiper[name] = new this.$swiper(`#${name}`, {
          autoplay: true,
          speed: 500,
          direction: "vertical",
          slidesPerView: i,
          spaceBetween: between,
          slidesPerGroup: 1,
          mousewheel: true,
          grabCursor: true,
        });
      })
    },
  },
};
</script>

<style lang="scss">
.home_qy {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;
  position: relative;
  z-index: 2;
  background: url('../../assets/hm_home/qy_bg.jpg') 0 0 no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  .left_select {
    position: absolute;
    left: 20px;
    top: 50%;
    line-height: 40px;
    height: 40px;
    transform: translate(0, -50%);
    z-index: 5;
    .select_value {
      position: relative;
      cursor: pointer;
      padding: 0 20px;
      background: #3e3e3e;
      border-radius: 10px;
      font-size: 16px;
      text-align: left;
      color: #7fe0f8;
      &.active {
        color: #7fe0f8;
        i {
          transform: rotate(90deg);
        }
      }
      i {
        position: absolute;
        right: 20px;
        top: 0;
        line-height: 40px;
        transition: all 0.3s;
      }
    }
    .select_list {
      border-radius: 10px;
      background: #3e3e3e;
      margin-top: 10px;
      position: relative;
      &::after {
        content: " ";
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px;
        top: -5px;
        left: 30px;
        border-top-width: 0;
        border-bottom-color: #3e3e3e;
      }
      li {
        margin: 0 10px;
        border-bottom: 1px solid #666;
        cursor: pointer;
        text-align: left;
        padding: 0 10px;
        &:hover {
          color: #7fe0f8;
        }
        &:last-child {
          border: none;
        }
      }
    }
  }
  .qy_top {
    flex: 0 0 80px;
    line-height: 80px;
    text-align: center;
    position: relative;
    pointer-events: all;
    .center_title {
      font-weight: bold;
      color: #fff;
      position: relative;
      width: 50%;
      height: 100%;
      margin: 0 auto;
      line-height: 60px;
      p {
        position: relative;
        z-index: 2;
        font-size: 34px;
        background: -webkit-linear-gradient(bottom, #c5f3f1, #fff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 2px;
        line-height: 2.5em;
      }
      .bg {
        position: absolute;
        width: 100%;
        height: 300px;
        background: url('../../assets/hm_home/titile.png') 0 0 no-repeat;
        background-size: 100%;
        z-index: 1;
      }
      .time {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        line-height: initial;
        z-index: 2;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 1px;
      }
      .bg {
        position: absolute;
        width: 100%;
        height: 300px;
        background: url("../../assets/hm_home/titile.png") 0 0 no-repeat;
        background-size: 100%;
        z-index: 1;
      }
    }
    .right_menus {
      position: absolute;
      right: 0;
      top: 0;
      width: 25%;
      display: flex;
      line-height: initial;
      height: 100%;
      align-items: center;
      .menu {
        width: 160px;
        height: 35px;
        background: url("../../assets/hm_home/btn.png") 0 0 no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        margin-right: 20px;
        &:hover {
          background: url("../../assets/hm_home/btn_active.png") 0 0 no-repeat;
          background-size: 100% 100%;
        }
      }
      .menu_icon {
        width: 35px;
        height: 35px;
        font-size: 30px;
        cursor: pointer;
        // background: url("../../assets/hm_home/icon_yj.png") 0 0 no-repeat;
        // background-size: 100% 100%;
        position: relative;
        margin-right: 20px;
        .circular {
          position: absolute;
          width: 20px;
          height: 20px;
          line-height: 20px;
          top: -10px;
          right: -10px;
          background: #ff0000;
          border-radius: 50%;
          text-align: center;
          font-weight: bold;
          font-size: 14px;
        }
      }
      .menu_button {
        height: 35px;
        line-height: 35px;
        padding: 0 20px;
        font-size: 16px;
        color: #fff;
        border-radius: 5px;
        background: #ff4949;
        cursor: pointer;
      }
    }
  }
  .qy_content {
    flex: 1;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    .left,
    .right {
      flex: 0 0 25%;
    }
    > div {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      pointer-events: all;
      // 圆环
      .circular_3d {
        position: relative;
        .circular {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 25%;
          height: 45%;
          transition: all 0.3s;
          transform-style: preserve-3d;
          cursor: pointer;
          z-index: 1;
          &.animate {
            animation-delay: 3s;
            animation-name: forCircular;
            animation-duration: 30s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
          }
          .circular_item {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            background: url("../../assets/hm_home/circular_bg.png") 0 0
              no-repeat;
            background-size: 100% 100%;
            transform-style: preserve-3d;
            text-shadow: 1px 1px 10px #000;
            font-weight: bold;
            .front {
              position: absolute;
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              backface-visibility: hidden;
              p:first-child {
                margin-bottom: 10px;
              }
            }
            .back {
              position: absolute;
              width: 100%;
              height: 100%;
              background: url("../../assets/hm_home/circular_bg.png") 0 0
                no-repeat;
              background-size: 100% 100%;
              backface-visibility: hidden;
              transform: rotateY(180deg);
            }
            span {
              font-size: 26px;
            }
            &:nth-child(1) {
              transform: rotateY(0deg) translateZ(120px);
            }
            &:nth-child(2) {
              transform: rotateY(120deg) translateZ(120px);
            }
            &:nth-child(3) {
              transform: rotateY(240deg) translateZ(120px);
            }
          }
        }
        .c_bg {
          position: absolute;
          width: 100%;
          height: 100%;
          background: url("../../assets/hm_home/btn_bg.png") center 0 no-repeat;
          background-size: auto 100%;
        }
      }
      .c_top_list {
        flex: 0 0 80px;
        display: flex;
        padding-top: 20px;
        margin-bottom: 40px;
        justify-content: space-around;
        .ct_item {
          margin-bottom: -20px;
          flex: 0 0 12%;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          text-align: center;
          font-size: 14px;
          background: url("../../assets/hm_home/ct_bg.png") center bottom
            no-repeat;
          background-size: 100% auto;
          cursor: pointer;
          &:last-child {
            margin: 0;
            margin-bottom: -20px;
          }
          p {
            margin-bottom: 5px;
          }
          .num {
            font-size: 28px;
            margin: 0;
          }
        }
      }
      .c_img_bg {
        flex: 1;
        overflow: hidden;
        position: relative;

        .content-left{
          width: 38%;
          float: left;
          height: 40%;
        }
        .content-right{
          width: 38%;
          float: right;
          height: 40%;
        }
        .content-bottom-left{
          width: 38%;
          float: left;
          height: 40%;
          margin-bottom: 0px;
          margin-top: 15%;
        }
        .content-bottom-right{
          width: 38%;
          float: right;
          height: 40%;
          margin-bottom: 0px;
          margin-top: 15%;
        }
        img {
          width: 100%;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(0, -50%);
        }
      }
      .m {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .title {
          font-size: 18px;
          padding: 10px;
          padding-left: 30px;
          box-sizing: border-box;
          background: url('../../assets/hm_home/title_bg.png') 10px center no-repeat;
          background-size: 50% 100%;
          position: relative;
          .t_right {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translate(0, -50%);
            color: rgba(146, 179, 194, 1);
            display: flex;
            font-size: 16px;
            font-weight: 400;
            p {
              margin-right: 20px;
              cursor: pointer;
              &:hover,
              &.active {
                color: #03fdf0;
              }
              &:last-child {
                margin: 0;
              }
            }
          }
        }
        .info {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding: 10px;
          &.sblb {
            flex-direction: row;
            > div {
              flex: 1;
            }
            .left_pie {
              background: url("../../assets/hm_home/pie_bg.png") 0 bottom
                no-repeat;
              background-size: 100% auto;
            }
            .right_legend {
              .legend {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                padding: 10px;
                color: #60abe0;
                &.count {
                  border-bottom: 1px solid #fff;
                  p:last-child {
                    font-size: 28px;
                    color: #fff;
                  }
                }
                p:last-child {
                  font-size: 20px;
                }
              }
            }
          }
        }
      }
    }
    // 滚动列表
    .swiper-container {
      width: 100%;
      flex: 1;
      overflow: hidden;
    }
    .table_header {
      display: flex;
      margin-bottom: 5px;
      p {
        flex: 1;
        text-align: center;
        line-height: 2.5em;
        background: rgba(#00a9ff, 0.3);
        font-size: 14px;
        &.w10 {
          flex: 0 0 10%;
        }
        &.w25 {
          flex: 0 0 25%;
        }
        &.w30 {
          flex: 0 0 30%;
        }
        &.w50 {
          flex: 0 0 50%;
        }
      }
    }
    .table_item {
      display: flex;
      p {
        flex: 1;
        text-align: center;
        padding: 0 10px;
        box-sizing: border-box;
        background: rgba(#00a9ff, 0.1);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
        &::before {
          content: '';
          display: inline-block;
          height: 100%;
          vertical-align: inherit;
        }
        &.active {
          border: 1px solid #03fdf0;
          box-sizing: border-box;
        }
        &:last-child {
          margin-right: 0;
        }
        &.w10 {
          flex: 0 0 10%;
        }
        &.w25 {
          flex: 0 0 25%;
        }
        &.w30 {
          flex: 0 0 30%;
        }
        &.w50 {
          flex: 0 0 50%;
        }
      }
    }
  }
  .co_light {
    color: #03fdf0;
  }
  .co_bl {
    color: #00ffff;
  }
  .co_gr {
    color: #60ff00;
  }
  .co_red {
    color: #ff0000;
  }
  .co_og {
    color: #ff6c00;
  }
  .co_yl {
    color: #ffff00;
  }
}
</style>
